<template>
    <div>
        <m-infinite
            v-model="loading"
            :isFinished="isFinished"
            @onLoad="getPexlesData(query)"
        >
            <m-water-fall
                class="px-1 w-full"
                :data="pexelList"
                nodeKey="id"
                :column="isMobileTerminal ? 2 : 5"
                :picturePreReading="true"
            >
                <template v-slot="{ item, width }">
                    <item-vue
                        :data="item"
                        :width="width"
                    ></item-vue>
                </template>
            </m-water-fall>
        </m-infinite>
    </div>
</template>

<script setup>
import { getPexlesList } from '@/api/pexel'
import { ref } from 'vue'
import itemVue from './item.vue'
import { isMobileTerminal } from '@/utils/flexble'
/**
 * 构建数据请求
 */
let query = {
    page: 1,
    size: 5
}

const pexelList = ref([])

const loading = ref(false)
const isFinished = ref(false)

const getPexlesData = async (query) => {
    //数据全部加载完成 return
    if (isFinished.value) return

    // 完成了第一次请求之后，后续的请求让page自增
    if (pexelList.value.length) {
        query.page += 1
    }
    const res = await getPexlesList(query)

    if (query.page === 1) {
        pexelList.value = res.list
    } else {
        pexelList.value.push(...res.list)
    }
    if (pexelList.value.length === res.total) {
        isFinished.value = true
    }
    loading.value = false
}
</script>
<style lang="scss" scope></style>
